<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .swiper {
            width: 384px;
            height: 240px;
            margin: 100px auto;
            position: relative;
            background-color: rgb(206, 222, 173);
        }

        .pic {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .pic img {
            width: 100%;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all 1s;
        }

        .pic img.active {
            opacity: 1;
        }

        .swiper .dot {

            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);

        }

        .swiper .dot span {
            width: 10px;
            height: 10px;
            display: inline-block;
            background-color: white;
            border-radius: 50%;
            cursor: pointer;
            margin: 0 5px;
        }

        .swiper .dot span.active {
            background-color: aqua;
        }

        .swiper .left {
            color: white;
            font-size: 30px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .swiper .right {
            color: white;
            font-size: 30px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="swiper swiper1">
        <div class="pic"></div>
        <div class="dot"></div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
    <div class="swiper swiper2">
        <div class="pic"></div>
        <div class="dot"></div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
</body>

</html>

<script>

    class Swiper {
        constructor(swiper, imgarr) {
            this.swiper = swiper;
            this.imgarr = imgarr;
            this.left = this.swiper.querySelector('.left');
            this.right = this.swiper.querySelector('.right');
            this.timer = null;
            this.num = 0;


            this.render();
            this.autoplay();
            this.bindevent();

        }

        render() {

            let str = this.imgarr.map((item, index) => { return `<img src = ${item} />`}).join('');
            let str2 = this.imgarr.map((item, index) => { return `<span></span>`  }).join('');
            this.swiper.querySelector('.pic').innerHTML = str;
            this.swiper.querySelector('.dot').innerHTML = str2;

        }

        autoplay() {

            this.timer = setInterval(() => {
                this.classlistRemove();
                if (this.num >= this.imgarr.length) { this.num = 0 }
                this.classlistAdd();
                this.num++;
            }, 1000);

        }

        bindevent() {

            this.swiper.onmouseover = () => {
                clearInterval(this.timer);
            }
            this.swiper.onmouseout = () => {
                this.autoplay();
            }

            this.left.onclick = () => {
                this.num -= 1;
                this.classlistRemove();
                if (this.num < 0) { this.num = this.imgarr.length - 1 };
                this.classlistAdd();
            }
            this.right.onclick = () => {
                this.num += 1;
                this.classlistRemove();
                if (this.num > this.imgarr.length - 1) { this.num = 0 };
                this.classlistAdd();
            }

            let spans = this.swiper.querySelector('.dot').children;
            for (let j = 0; j < spans.length; j++){
                spans[j].onclick = () => {
                    this.classlistRemove();
                    spans[j].classList.add('active');
                    this.swiper.querySelector('.pic').children[j].classList.add('active');
                }
            }
            
        }

        classlistRemove() {
            for (let i = 0; i < this.imgarr.length; i++) {
                this.swiper.querySelector('.pic').children[i].classList.remove('active');
                this.swiper.querySelector('.dot').children[i].classList.remove('active');
            }
        }

        classlistAdd() {
            this.swiper.querySelector('.pic').children[this.num].classList.add('active');
            this.swiper.querySelector('.dot').children[this.num].classList.add('active');
        }
    }



    let imgarr1 = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg'];
    let imgarr2 = ['./img/pic1.jpg', './img/pic2.jpg', './img/pic3.jpg', './img/pic4.jpg'];

    let swiper1 = document.querySelector('.swiper1');
    let swiper2 = document.querySelector('.swiper2');

    new Swiper(swiper1, imgarr1);
    new Swiper(swiper2, imgarr2);


</script>